<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <meta charset="UTF-8"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />-->
    <script src="/js/jquery-1.8.3.min.js"></script>

    <script src="../js/script.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/sendBtn.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            position: relative;
            left: -3px;
            width: 300px;
            height: 40px;
            margin: 0 auto;
            margin-top: 10px;
            background-color: #e8e8e8;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
        }

        .bgColor {
            position: absolute;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
            background-color: lightblue;
        }

        .txt {
            position: absolute;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #000;
            text-align: center;
        }

        .slider {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 38px;
            border: 1px solid #ccc;
            background: #fff;
            text-align: center;
            cursor: move;
        }

        .slider > i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .slider.active > i {
            color: green;
        }

        .btns {
            position: absolute;
            width: 40px;
            height: 40px;
            background: #fff url() center no-repeat;
            background-size: 13px;
            border: 1px solid #ccc;
            cursor: move;
        }
    </style>
    <title>梦博客</title>
</head>
<body>
<header class="clearfix">
    <div class="banner">
        <div class="banner-1"></div>
        <div class="banner-2"></div>
        <div class="banner-3"></div>
    </div>

    <!--LOGO-->
    <div class="login">
        <img src="../img/logo2.png" alt="" class="logo"/>

        <!--注册登录框开始-->
        <div class="login-bar">
            <div class="login-tab"><!--
					--><a class="active">登录</a><!--
					--><a>注册</a><!--
			--></div>
            <div class="div-contain">
                <div class="zhuce">
                    <div class="item-left">
                        <form id="formDemo">
                            <input type="text" name="userName" id="userName" placeholder="用户名或邮箱"/>
                            <input type="password" name="password" id="password" placeholder="密码"/>
                            <div id="box" onselectstart="return false;">
                                <div class="bgColor"></div>
                                <div class="txt">滑动解锁</div>
                                <!--给i标签添加上相应字体图标的类名即可-->
                                <div class="btns"><i class="iconfont &#xe655;"></i></div>
                            </div>
                            <div class="btn" id="loginBtn">
                                登录
                            </div>
                            <p class="ot"><img src="../img/check-1.jpg"/>
                                十天内免登录
                                <span class="ot-r">
									<span>忘记密码？</span><!--
									--><i>|</i><!--
									--><span>找回账号</span>
								</span>
                            </p>
                        </form>
                    </div>
                    <div class="item-right">
                        <i class="or">或</i>
                        <div class="others">
                            <div><i class="iconfont iconshouji"></i><span>手机账号登录</span></div>
                            <div><i class="iconfont iconqq"></i><span>腾讯QQ登录</span></div>
                        </div>

                    </div>
                </div>
                <div class="denglu">
                    <div class="item-left">
                        <input type="text" name="adduserName" id="adduserName" placeholder="用户名"/>
                        <input type="password" name="addpassword" id="addpassword" placeholder="密码"/>
                        <input type="text" name="addphont" id="addphone" placeholder="手机号"/>
                        <input type="text" id="code" width="100px" placeholder="验证码" style="z-index: 1">
                        <span style="z-index: 2;position: absolute;right: 254px;top: 151px"><button type="button" id="sendbtn" class="layui-btn layui-btn-warm">获取验证码</button></span>
                        <div class="btn" id="addBtn">
                            注册
                        </div>
                    </div>
                    <div class="item-right">
                        <i class="or">或</i>
                        <div class="others">
                            <div><i class="iconfont iconyouxiang"></i><span>邮箱注册</span></div>
                            <div><i class="iconfont iconqq"></i><span>腾讯QQ注册</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
</body>
<script>
    var sliderFlag = false;
    $(function () {
        $("#loginBtn").click(function () {
            var userName = $("#userName").val();
            var password = $("#password").val();
            if (userName == null || userName == "") {
                alert("用户名不能为空！");
                return;
            }
            if (password == null || password == "") {
                alert("密码不能为空！");
                return;
            }
            if (!sliderFlag) {
                alert("滑块验证未成功");
                return;
            }
            $.getJSON("/user/login.do", {userName: userName, password: password}, function (result) {
                if (result.i == "1") {
                    alert("登录成功！");
                    window.location.href = "/jsp/index.jsp";
                }
                if(result.i == "2"){
                    alert("登录失败，账号或者密码错误！");
                    $("#userName").val(result.users.userName);
                    $("#password").val(result.users.password);
                }
                if(result.i == "3"){
                    alert("登录失败，账号不存在！");
                    $("#userName").val(result.users.userName);
                    $("#password").val(result.users.password);
                }
            });
            return;
        });

    });

    //一、定义了一个获取元素的方法
    function getEle(selector) {
        return document.querySelector(selector);
    }

    //二、获取到需要用到的DOM元素
    var box = getEle("#box"),//容器
        bgColor = getEle(".bgColor"),//背景色
        txt = getEle(".txt"),//文本
        slider = getEle(".btns"),//滑块
        icon = getEle(".btns>i"),
        successMoveDistance = box.offsetWidth - slider.offsetWidth,//解锁需要滑动的距离
        downX,//用于存放鼠标按下时的位置
        isSuccess = false;//是否解锁成功的标志，默认不成功

    //三、给滑块添加鼠标按下事件
    slider.onmousedown = mousedownHandler;

    //3.1鼠标按下事件的方法实现
    function mousedownHandler(e) {
        bgColor.style.transition = "";
        slider.style.transition = "";
        var e = e || window.event || e.which;
        downX = e.clientX;
        //在鼠标按下时，分别给鼠标添加移动和松开事件
        document.onmousemove = mousemoveHandler;
        document.onmouseup = mouseupHandler;
    };

    //四、定义一个获取鼠标当前需要移动多少距离的方法
    function getOffsetX(offset, min, max) {
        if (offset < min) {
            offset = min;
        } else if (offset > max) {
            offset = max;
        }
        return offset;
    }

    //3.1.1鼠标移动事件的方法实现
    function mousemoveHandler(e) {
        var e = e || window.event || e.which;
        var moveX = e.clientX;
        var offsetX = getOffsetX(moveX - downX, 0, successMoveDistance);
        bgColor.style.width = offsetX + "px";
        slider.style.left = offsetX + "px";

        if (offsetX == successMoveDistance) {
            success();
        }
        //如果不设置滑块滑动时会出现问题（目前还不知道为什么）
        e.preventDefault();
    };

    //3.1.2鼠标松开事件的方法实现
    function mouseupHandler(e) {
        if (!isSuccess) {
            bgColor.style.width = 0 + "px";
            slider.style.left = 0 + "px";
            bgColor.style.transition = "width 0.8s linear";
            slider.style.transition = "left 0.8s linear";
        }
        document.onmousemove = null;
        document.onmouseup = null;
    };

    //五、定义一个滑块解锁成功的方法
    function success() {
        sliderFlag = true;
        isSuccess = true;
        txt.innerHTML = "解锁成功";
        bgColor.style.backgroundColor = "lightgreen";
        slider.className = "btns active";
        icon.className = "iconfont icon-xuanzhong";
        //滑动成功时，移除鼠标按下事件和鼠标移动事件
        slider.onmousedown = null;
        document.onmousemove = null;
    };
</script>
</html>